<template>
    <div class="edu-page-warp">
        <div class="edu-page-title">{{ $t('message.filterCondition') }}</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-form :model="condition" label-position="left" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="年级：">
                            <el-select
                                v-model="condition.grade"
                                placeholder="请选择年级"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="grade in grades"
                                    :key="grade.value"
                                    :label="grade.label"
                                    :value="grade.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学生类型：">
                            <el-select
                                v-model="condition.trainingLevel"
                                placeholder="请选择学生类型"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="option in levels"
                                    :key="option.value"
                                    :label="option.label"
                                    :value="option.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学院：">
                            <el-select
                                v-model="condition.faculty"
                                placeholder="请选择学院"
                                style="width: 100%"
                                @change="currentCollageChange()"
                            >
                                <el-option
                                    v-for="collage in collages"
                                    :key="collage.value"
                                    :label="collage.label"
                                    :value="collage.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="专业：">
                            <el-select
                                v-model="condition.profession"
                                placeholder="请选择专业"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="major in currentMajors"
                                    :key="major.value"
                                    :label="major.label"
                                    :value="major.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="注册状态：">
                            <el-select
                                v-model="condition.registerStatus"
                                placeholder="请选择注册状态"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="option in registerStatuses"
                                    :key="option.value"
                                    :label="option.label"
                                    :value="option.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否打卡：">
                            <el-select
                                v-model="condition.isSignIn"
                                placeholder="请选择是否打卡"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="option in cardStatuses"
                                    :key="option.value"
                                    :label="option.label"
                                    :value="option.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="范围打卡：">
                            <el-select
                                v-model="condition.rangeCard"
                                placeholder="请选择范围打卡"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="option in cardAreas"
                                    :key="option.value"
                                    :label="option.label"
                                    :value="option.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="人像对比：">
                            <el-select
                                v-model="condition.similar"
                                placeholder="请选择人像对比"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="option in compareOptions"
                                    :key="option.value"
                                    :label="option.label"
                                    :value="option.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6" :offset="18">
                        <div class="text-right">
                            <el-button @click="reset()">{{ $t('message.reset') }}</el-button>
                            <el-button
                                type="primary"
                                @click="submitForm()"
                            >{{ $t('message.filter') }}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <div class="edu-page-title mg-top">{{ $t('message.studentList') }}</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <div class="edu-opertion-bar">
                <div class="float-left">
                    <el-input
                        v-model="condition.name"
                        placeholder="学号或姓名搜索"
                        prefix-icon="el-icon-search"
                        @keyup.enter.native="submitForm"
                    />
                </div>
                <div class="float-right">
                    <el-button plain @click="exportExcel()">{{ $t('message.export') }}</el-button>
                </div>
            </div>

            <el-table :data="tableData.list" style="width: 100%" class="has-top-border" stripe>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form
                            label-position="left"
                            label-width="100px"
                            inline
                            class="edu-row-expand-4"
                        >
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="学号：">
                                        <span>{{ props.row.studentId }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="姓名：">
                                        <span>{{ props.row.name }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="身份证号：">
                                        <span>{{ props.row.number }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="联系方式：">
                                        <span>{{ props.row.phoneNumber }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="年级：">
                                        <span>{{ props.row.grade }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="学生类型：">
                                        <span>{{ switchLevel(props.row.trainingLevel) }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="学院：">
                                        <span>{{ props.row.faculty }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="专业：">
                                        <span>{{ props.row.profession }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="缴费状态：">
                                        <span v-if="props.row.isPayment==='0'">未缴费</span>
                                        <span v-if="props.row.isPayment==='1'">已交费</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="范围打卡：">
                                        <span v-if="props.row.rangeCard==='0'">未完成</span>
                                        <span v-if="props.row.rangeCard==='1'">已完成</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="人像对比：">
                                        <span v-if="props.row.similar==='0'">未完成</span>
                                        <span v-if="props.row.similar==='1'">已完成</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="身份证正面：">
                                        <span>
                                            <img src="/static/images/icon_photo.png" alt>
                                        </span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="上学期照片：">
                                        <span>
                                            <img src="/static/images/icon_photo.png" alt>
                                        </span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="本次注册照片：">
                                        <span>
                                            <img src="/static/images/icon_photo.png" alt>
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </template>
                </el-table-column>
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column prop="studentId" label="学号"/>
                <el-table-column prop="name" label="姓名"/>
                <el-table-column prop="faculty" label="学院"/>
                <el-table-column prop="profession" label="专业"/>
                <el-table-column prop="trainingLevel" label="学生类型">
                    <template slot-scope="scope">
                        <span>{{ switchLevel(scope.row.trainingLevel) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="schoolStatus" label="学籍状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.schoolStatus==='0'">休学</span>
                        <span v-if="scope.row.schoolStatus==='1'">在籍</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isPayment" label="缴费状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isPayment==='0'">未缴费</span>
                        <span v-if="scope.row.isPayment==='1'">已交费</span>
                    </template>
                </el-table-column>
                <el-table-column prop="rangeCard" label="范围打卡">
                    <template slot-scope="scope">
                        <i v-if="scope.row.rangeCard==='0'" class="el-icon-error color-error"/>
                        <i v-if="scope.row.rangeCard==='1'" class="el-icon-success color-success"/>
                    </template>
                </el-table-column>
                <el-table-column label="人像对比">
                    <template slot-scope="scope">
                        <i v-if="scope.row.similar==='0'" class="el-icon-error color-error"/>
                        <i v-if="scope.row.similar==='1'" class="el-icon-success color-success"/>
                    </template>
                </el-table-column>
                <el-table-column label="报到状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.registerStatus==='1'" type="success" size="mini">已完成</el-tag>
                        <el-tag v-if="scope.row.registerStatus==='0'" type="info" size="mini">未完成</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.registerStatus==='0'"
                            type="text"
                            size="mini"
                            @click="registerConfirm(scope.row)"
                        >注册确认</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="condition.pageNum_"
                        :page-sizes="[20, 50, 100, 500,1000]"
                        :page-size="condition.pageSize_"
                        :total="tableData.total_"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:10px 0 0 0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import studentCheckApi from "common/src/api/welcomeService/studentCheck";
import { queryDic, queryMajors } from "common/src/api/dictionary";
export default {
    name: "checkRegister",
    data() {
        return {
            input21: "",
            currentPage4: 4,
            condition: {
                "x-token": "",
                pageNum_: 1,
                pageSize_: 20,
                name: "",
                grade: new Date().getFullYear().toString(),
                trainingLevel: "",
                faculty: "",
                profession: "",
                registerStatus: "",
                rangeCard: "",
                isSignIn: "",
                similar: ""
            },
            tableData: {},
            levels: [],
            grades: [],
            registerStatuses: [],
            cardStatuses: [],
            cardAreas: [],
            compareOptions: [],
            collages: [],
            majors: [],
            defaultOptions: [{ value: "", label: "全部" }],
            allMajors: [],
            currentMajors: [],
            compareOptions: [],
            unregisterStudentList: []
        };
    },
    methods: {
        reset() {
            this.condition.grade =
                this.grades.length > 0 ? this.grades[0].value : "";
            this.condition.trainingLevel = "";
            this.condition.faculty = "";
            this.condition.profession = "";
            this.condition.registerStatus = "";
            this.condition.rangeCard = "";
            this.condition.isSignIn = "";
            this.condition.similar = "";
            this.getStudentInfo(false);
        },
        submitForm() {
            this.getStudentInfo();
        },
        exportExcel() {
            studentCheckApi.findOldStuInfoRegisterListExport(this.condition);
        },
        registerConfirm(info) {
            studentCheckApi
                .updateReportOrRegisterStatus(info.studentId)
                .then(response => {
                    if (response.code === 200) {
                        this.$message({
                            type: "success",
                            message: "确认成功"
                        });
                        this.getStudentInfo(false);
                    } else if (response.code === 300) {
                        this.$message({
                            type: "error",
                            message: "确认失败：" + response.msg
                        });
                    } else {
                        throw "确认失败";
                    }
                })
                .catch(error => {
                    this.$message({
                        type: "error",
                        message: "确认失败"
                    });
                });
        },
        makeOptions(response, type) {
            if (response.data && response.data[type]) {
                let items = [];
                for (var key in response.data[type]) {
                    items.push({
                        value: String(key),
                        label: response.data[type][key]
                    });
                }
                return items;
            }

            return [];
        },
        getConditionOptions() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_YX", "G_ZY", "X_XQ"]
            };
            queryDic(data).then(response => {
                if (response.code === 200) {
                    // 培养层次
                    this.levels = this.defaultOptions.concat(
                        this.makeOptions(response, "X_PYCC")
                    );
                    // 学院
                    this.collages = this.defaultOptions.concat(
                        this.makeOptions(response, "X_YX")
                    );
                    // 专业
                    this.allMajors = this.makeOptions(response, "G_ZY");
                    this.currentMajors = this.defaultOptions.concat(
                        this.allMajors
                    );
                    // 范围打卡
                    this.cardAreas = this.defaultOptions.concat(
                        this.makeOptions(response, "X_XQ")
                    );
                }
            });
            this.grades = (function() {
                const now = new Date().getFullYear();
                const years = [];
                for (let i = 0; i < 6; i++) {
                    years.push({
                        label: now - i,
                        value: now - i
                    });
                }
                return years;
            })();

            this.registerStatuses = [
                { value: "", label: "全部" },
                { value: "0", label: "未注册" },
                { value: "1", label: "已注册" }
            ];

            this.cardStatuses = [
                { value: "", label: "全部" },
                { value: "0", label: "是" },
                { value: "1", label: "否" }
            ];

            this.compareOptions = [
                { value: "", label: "全部" },
                { value: "0", label: "未完成" },
                { value: "1", label: "已完成" }
            ];
        },
        getStudentInfo(showMessage = true) {
            studentCheckApi
                .findOldStuInfoRegisterList(this.condition)
                .then(response => {
                    this.tableData = response.data;
                    if (response.code === 200) {
                        if (showMessage) {
                            this.$message({
                                type: "success",
                                message: "查询成功"
                            });
                        }
                    } else {
                        throw "查询失败";
                    }
                })
                .catch(error => {
                    this.$message({
                        type: "error",
                        message: "查询失败"
                    });
                });
        },
        currentCollageChange() {
            if (this.condition.faculty == "") {
                this.currentMajors = this.defaultOptions.concat(this.allMajors);
                this.condition.profession = "";
            } else {
                queryMajors(this.condition.faculty).then(
                    response => {
                        if (response.code == 200) {
                            let collageMajors = this.makeOptions(
                                response,
                                "G_ZY"
                            );
                            this.currentMajors = this.defaultOptions.concat(
                                collageMajors
                            );
                        } else {
                            this.currentMajors = this.defaultOptions;
                        }
                    },
                    error => {
                        this.currentMajors = this.defaultOptions;
                    }
                );
            }
        },
        handleSizeChange(val) {
            this.condition.pageSize_ = val;
            this.getStudentInfo(false);
        },
        handleCurrentChange(val) {
            this.condition.pageNum_ = val;
            this.getStudentInfo(false);
        },
        switchLevel(level) {
            let levelObject = this.levels.find(item => {
                return item.value === level;
            });
            return levelObject ? levelObject.label : "";
        }
    },
    mounted() {
        this.condition["x-token"] =
            this.$store.state.session.sessionid ||
            localStorage.getItem("sessionid") ||
            "";
        this.getConditionOptions();
        this.getStudentInfo(false);
    }
};
</script>
<style lang="scss" scoped>
</style>
